<main class="app-content">
  <div class="searchBox mb-4">
    <div class="w-60">
      <div class="w-100" style="display: flex;align-items: center">
        <label class="mr-2" style="width: 10% !important;;">入库日期</label>
        <input style="width: 38% !important;" class="form-control mr-1" type="text"  (click)="beginDate.open()" [max]="endCtrl.value" (ngModelChange)="onSwitchDate($event)" [formControl]="beginCtrl" placeholder="选择开始日期" [matDatepicker]="beginDate" readonly>
        <mat-datepicker #beginDate></mat-datepicker>
        -
        <input style="width: 37% !important; " class="form-control ml-1" type="text"  (click)="endDate.open()" [min]="beginCtrl.value" (ngModelChange)="onSwitchDate($event)" [formControl]="endCtrl" placeholder="选择截止日期" [matDatepicker]="endDate" readonly>
        <mat-datepicker #endDate></mat-datepicker>
      </div>
    </div>
    <div class="w-40 input-group searchStyle">
      <input type="text" class="form-control" placeholder="请输入入库单号" [(ngModel)]="asset.rukuNum" name="rukuNum">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" (click)="search()"><i class="fa fa-search"></i></button>
      </div>
      <!--<span class="ml-2 cursor"  data-toggle="modal" data-target="#exampleModalLong">高级搜索</span>-->
    </div>
  </div>
  <div>
    <li class="mb-3 list-title">入库列表</li>
  </div>
  <div class="tables">
    <div class="grid">
      <div class="left-table">
        <table mat-table [dataSource]="assets | paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById" class="table-bordered">
          <ng-container matColumnDef="rukuNum">
            <th mat-header-cell *matHeaderCellDef>入库单号</th>
            <td mat-cell *matCellDef="let row" [id]="row.rukuNum">{{ row.rukuNum }}</td>
          </ng-container>

          <ng-container matColumnDef="assetName">
            <th mat-header-cell *matHeaderCellDef>资产名称</th>
            <td class="overWords" mat-cell *matCellDef="let row ">{{ row.assetName }}</td>
          </ng-container>


          <ng-container matColumnDef="assetNum">
            <th mat-header-cell *matHeaderCellDef>资产数量</th>
            <td class="overWords" mat-cell *matCellDef="let row ">{{ row.num }}</td>
          </ng-container>

          <ng-container matColumnDef="createDate">
            <th mat-header-cell *matHeaderCellDef>入库日期</th>
            <td mat-cell *matCellDef="let row">{{ row.createDate | date: 'yyyy-MM-dd' }}</td>
          </ng-container>

          <!--对应列名List.ts中定义-->
          <tr mat-header-row *matHeaderRowDef="colsone"></tr>
          <tr mat-row *matRowDef="let data; columns: colsone"></tr>
        </table>
      </div>
      <div class="middle-table">
        <table mat-table [dataSource]="assets | paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById" class="table-bordered">
          <ng-container matColumnDef="assetType">
            <th mat-header-cell *matHeaderCellDef>资产类别</th>
            <td mat-cell *matCellDef="let row">
               <span *ngFor="let item of row.assetinfos">
                  {{ item.oaAssetType?.GDZCLBMC }}
               </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="brand">
            <th mat-header-cell *matHeaderCellDef>品牌</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                {{ item.assetBrand }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="source">
            <th mat-header-cell *matHeaderCellDef>来源</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                <span *ngIf="item.source === '0'">自购</span>
                <span *ngIf="item.source === '1'">租赁</span>
                <span *ngIf="item.source === '2'">借用</span>
                <span *ngIf="item.source === '3'">其他</span>
                <span *ngIf="item.source === '4'">自产</span>
                <span *ngIf="item.source === '5'">赠送</span>
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="version">
            <th mat-header-cell *matHeaderCellDef>型号</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                {{ item.assetVersion }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="sourceComefrom">
            <th mat-header-cell *matHeaderCellDef>渠道</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                {{ item.sourceComefrom }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="assetPrice">
            <th mat-header-cell *matHeaderCellDef>金额</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                {{ item.assetPrice }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="buyDate">
            <th mat-header-cell *matHeaderCellDef>购入日期</th>
            <td mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                {{ item.buyDate | date: 'yyyy-MM-dd' }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="snNum">
            <th mat-header-cell *matHeaderCellDef>SN号</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                {{ item.snNum }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="assetImg">
            <th mat-header-cell *matHeaderCellDef>图片</th>
            <td mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                <img style="width: 40px;height: 40px;" *ngIf="item.assetImgUrl1" class="assetImg" [src]="environment.apiUrl + item.assetImgUrl1"  (click)="bigImg(item.assetImgUrl1,item.assetImgUrl2,row.assetImgUrl3)">
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="user">
            <th mat-header-cell *matHeaderCellDef>使用人</th>
            <td mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                {{ item.sysUser.realName }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="department">
            <th mat-header-cell *matHeaderCellDef>使用部门</th>
            <td mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                {{ item.sysDepartment?.departName }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="address">
            <th mat-header-cell *matHeaderCellDef>存放地</th>
            <td mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                {{ item.address }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="seatNum">
            <th mat-header-cell *matHeaderCellDef>座位号</th>
            <td mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                {{ item.seatNum }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="invoiceNum">
            <th mat-header-cell *matHeaderCellDef>发票号码</th>
            <td mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                {{ item.invoiceNum }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="qrcode">
            <th mat-header-cell *matHeaderCellDef>二维码</th>
            <td mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                <img style="width: 40px; height: 40px" *ngIf="item.qrcodeUrl" class="qr-code" [src]="environment.apiUrl+item.qrcodeUrl" alt="" (click)="bigCode(item.qrcodeUrl)">
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="remark">
            <th mat-header-cell *matHeaderCellDef>资产备注</th>
            <td mat-cell *matCellDef="let row">
              <span *ngFor="let item of row.assetinfos">
                  {{ item.remark }}
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="operate">
            <th mat-header-cell *matHeaderCellDef>操作</th>
            <td mat-cell *matCellDef="let row">
              <button mat-button (click)="onEditruku(row)">编辑</button>
              <button mat-button (click)="onDeleteruku(row.rukuNum)">删除</button>
            </td>
          </ng-container>

          <!--对应列名List.ts中定义-->
          <tr mat-header-row *matHeaderRowDef="colstwo"></tr>
          <tr mat-row *matRowDef="let data; columns: colstwo"></tr>
        </table>
      </div>
      <div class="right-table">
        <table mat-table [dataSource]="assets | paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById" class="table-bordered">
          <ng-container matColumnDef="operate">
            <th mat-header-cell *matHeaderCellDef>操作</th>
            <td mat-cell *matCellDef="let row" [id]="row.rukuNum + '0'">
              <button mat-button (click)="onEditruku(row)" *ngIf="isAdmin">编辑</button>
              <button mat-button (click)="onDeleteruku(row.rukuNum)" *ngIf="isAdmin">删除</button>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="colsthree"></tr>
          <tr  mat-row *matRowDef="let data; columns: colsthree"></tr>
        </table>
      </div>
    </div>
  </div>

  <app-pagination
    (pageChange)="onPageChanged($event)"
    [maxSize]="9"
    [isShowInput]="true"
    [isMiniMode]="false"
    [isShowPage]="true"
    [total]="total"
  >
  </app-pagination>
  <div class="cover" *ngIf="imgAppear">
    <div class="bigImgbox">
      <span (click)="closeImg()">X</span>
      <div class="imgs">
        <img  [src]="imgUrl1" alt="">
        <img style="margin-left: 3px"  *ngIf="haveimg2" [src]="imgUrl2" alt="">
        <img style="margin-left: 3px" *ngIf="haveimg3" [src]="imgUrl3" alt="">
      </div>
    </div>
  </div>
  <div class="cover" *ngIf="codeAppear">
    <div class="bigImgbox">
      <span (click)="closeCode()">X</span>
      <div class="imgs">
        <img style="margin: 0 auto" [src]="imgUrl1" alt="">
      </div>
    </div>
  </div>
</main>
